<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed_Attribute</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>

    <div id="app">

        <!--字符串拼接-->
        <h1>{{firstname+lastname}}</h1>
        <h1>{{totalname}}</h1>

        <!--字符串逆序-->
        <h1>{{word.split("").reverse().join("")}}</h1>
        <h1>{{wordReverse}}</h1>

        <!--偶数数组计算-->
        <h1 v-for="item,key in stars" v-if="key%2==0">{{item}}</h1>
        <h1 v-for="item,key in ArrayComp">{{item}}</h1>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data:{
            	firstname:"张",
                lastname:"三",
                word:"music",
	            stars:['凡凡','翔翔','ReRe']
            },
            computed:{
            	totalname:function () {
                    return this.firstname + this.lastname
	            },
	            wordReverse:function () {
            		return this.word.split("").reverse().join("")
                },
                ArrayComp:function () {
            		return this.stars.filter(function (item,index) {
                        return index % 2 == 0
		            })
                }
            }
        })
    </script>
</body>
</html>